<template>
  <view class="">
    <u-navbar title="编辑信息" :autoBack="true"> </u-navbar>
     <u-gap height="50" bgColor="#F8FAFB"></u-gap>
      <view class="u-p-30">
        <u--form labelPosition="top" labelWidth="200" :model="modelForm" :rules="rules" ref="uForm">
          <u-form-item label="姓名" prop="teacherName" borderBottom>
            <u--input v-model="modelForm.teacherName" placeholder="请填写姓名" border="none"></u--input>
          </u-form-item>

          <u-form-item label="年龄" prop="teacherAge" borderBottom>
            <u--input v-model="modelForm.teacherAge" placeholder="请填写年龄" border="none"></u--input>
          </u-form-item>

          <u-form-item label="性别" prop="teacherSex" borderBottom @click="showSex = true">
            <text>{{studentSexText}}</text>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>

          <u-form-item label="民族" prop="nation" borderBottom>
            <u--input v-model="modelForm.nation" placeholder="请填写民族" border="none"></u--input>
          </u-form-item>

          <u-form-item label="籍贯" prop="natively" borderBottom>
            <u--input v-model="modelForm.natively" placeholder="请填写籍贯" border="none"></u--input>
          </u-form-item>

         <!-- <u-form-item label="头像" prop="headImage" borderBottom>
            <u-upload :fileList="headFileList" @afterRead="afterRead" @delete="deleteImage" name="headImage" :maxCount="1">
            </u-upload>
          </u-form-item> -->

          <u-form-item label="出生日期" prop="teacherBirthday" borderBottom @click="showDate=true">
            <u--input v-model="modelForm.teacherBirthday" :disabled="true" disabledColor="#ffffff" placeholder="请选择出生日期"
              border="none"></u--input>
          </u-form-item>

          <u-form-item label="电话" prop="teacherTelephone" borderBottom>
            <u--input v-model="modelForm.teacherTelephone" placeholder="请填写本人电话" border="none"></u--input>
          </u-form-item>

          <u-form-item label="身份证号" prop="identityCardNumber" borderBottom>
            <u--input v-model="modelForm.identityCardNumber" placeholder="请填写身份证号" border="none"></u--input>
          </u-form-item>

         <!-- <u-form-item label="证件正面照片" prop="frontImage" borderBottom>
            <u-upload :fileList="frontFileList" @afterRead="afterRead" @delete="deleteImage" name="frontImage"
              :maxCount="1">
            </u-upload>
          </u-form-item>

          <u-form-item label="证件反面照片" prop="reversesImage" borderBottom>
            <u-upload :fileList="reversesFileList" @afterRead="afterRead" @delete="deleteImage" name="reversesImage"
              :maxCount="1">
            </u-upload>
          </u-form-item> -->

        </u--form>
        <view class="u-p-30">
          <u-button type="primary" customStyle="margin-top: 50px;background:#182044;border-color:#182044;color:#C4AD8C;"
            @click="handleSubmit">保存</u-button>
        </view>
        <!--  -->
        <u-action-sheet :show="showSex" :actions="userSexList" title="请选择性别" @close="showSex = false" @select="sexSelect">
        </u-action-sheet>
        <u-datetime-picker :minDate="minDate" :show="showDate" v-model="dateTimestamp" mode="date" @close="showDate=false"
          @cancel="showDate=false" @confirm="showDate=false"></u-datetime-picker>
      </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  import {
    getUserInfo,
    updateTeacherInfo,
    upload
  } from '@/api/user.js'
  export default {
    computed: {
      ...mapState(["userId", 'dictDataList']),
      studentSexText() {
        let row = this.userSexList.find(item => item.value == this.modelForm.teacherSex);
        return row ? row.name : '';
      },
      minDate() {
        return new Date('1900-01-01').getTime()
      }
    },
    data() {
      return {
        showSex: false,
        showDate: false,
        userSexList: [],
        headFileList: [],
        frontFileList: [],
        reversesFileList: [],
        modelForm: {},
        rules: {
          teacherTelephone: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              // 触发器可以同时用blur和change
              trigger: ['change', 'blur'],
            }
          ]
        },
        dateTimestamp: ''
      }
    },
    watch: {
      dateTimestamp(newValue) {
        if (newValue && typeof newValue === 'number') {
          this.$set(this.modelForm, 'teacherBirthday', this.$u.timeFormat(newValue, 'yyyy-mm-dd'))
        }
      }
    },
    onLoad() {
      this.userSexList = this.dictDataList.filter(item => item.dictType === 'system_user_sex').map(item => {
        return {
          name: item.label,
          value: item.value
        }
      });
      let userInfo = uni.getStorageSync('teachr_user_info') || {};
      console.log(userInfo)
      this.modelForm = Object.assign({}, {
        teacherName: userInfo.teacherName || '',
        teacherAge: userInfo.teacherAge || '',
        teacherSex: userInfo.teacherSex || '',
        nation: userInfo.nation || '',
        natively: userInfo.natively || '',
        headImage: userInfo.headImage || '',
        teacherBirthday: userInfo.teacherBirthday.includes('T') ? userInfo.teacherBirthday.split('T').shift() :
          userInfo.teacherBirthday || '',
        teacherTelephone: userInfo.teacherTelephone || '',
        identityCardNumber: userInfo.identityCardNumber || '',
        frontImage: userInfo.frontImage || '',
        reversesImage: userInfo.reversesImage || '',
      });
      if (userInfo.teacherBirthday) {
        this.dateTimestamp = userInfo.teacherBirthday
      }
      this.setUploadImage();
    },
    methods: {
      setUploadImage() {
        if (this.modelForm.headImage) {
          this.headFileList = [{
            url: this.modelForm.headImage
          }]
        }
        if (this.modelForm.frontImage) {
          this.frontFileList = [{
            url: this.modelForm.frontImage
          }]
        }
        if (this.modelForm.reversesImage) {
          this.reversesFileList = [{
            url: this.modelForm.reversesImage
          }]
        }
      },
      sexSelect(e) {
        console.log(e)
        this.modelForm.teacherSex = e.value;
      },
      handleSubmit() {
        this.$refs.uForm.validate().then(res => {
          updateTeacherInfo({
            ...this.modelForm,
            id: this.userId
          }).then(res => {
            if (res.code == 0) {
              this.$u.toast('更新成功', 2000, () => {
                uni.navigateBack({
                  delta: 1
                })
              })
            } else {
              this.$u.toast(res.msg)
            }
          })
        }).catch(errors => {
          console.log(errors)
        })
      },
      afterRead(e) {
        upload({
          name: 'file',
          fileType: 'image',
          filePath: e.file.thumb
        }).then(res => {
          console.log(res)
          if (res.code == 0) {
            this.$set(this.modelForm, e.name, res.data);
            this.$u.toast('上传成功');
            this.setUploadImage();
          } else {
            this.$u.toast(res.msg)
          }
        })
      },
      deleteImage(e) {
        switch (e.name) {
          case 'headImage':
            this.headFileList = [];
            this.modelForm.headImage = ''
            break;
          case 'frontImage':
            this.frontFileList = [];
            this.modelForm.frontImage = ''
            break;
          case 'reversesImage':
            this.reversesFileList = [];
            this.modelForm.reversesImage = ''
            break;
        }
      }
    },
  }
</script>

<style>
</style>
